<script setup lang="ts">
import type { Comment as CommentType } from '@/apis/methods/comment.api'
import CommentList from './CommentList.vue'
import CommentEditor from './CommentEditor.vue'
import { PhChatCircle } from '@phosphor-icons/vue'

interface Props {
  comments: CommentType[]
  loading?: boolean
  loadingMore?: boolean
  hasMore?: boolean
  repliesData: Record<string, CommentType[]>
  showReplies: Record<string, boolean>
  hasMoreReplies: Record<string, boolean>
  submitting?: boolean
  totalComments: number
}

withDefaults(defineProps<Props>(), {
  loading: false,
  loadingMore: false,
  hasMore: false,
  submitting: false,
})

const emit = defineEmits<{
  loadMore: []
  toggleReplies: [commentId: string]
  loadMoreReplies: [parentId: string]
  toggleLike: [commentId: string]
  createComment: [content: string, mentionedUsers: string[]]
  createReply: [parentId: string, content: string, mentionedUsers: string[]]
}>()

const handleLoadMore = () => {
  emit('loadMore')
}

const handleToggleReplies = (commentId: string) => {
  emit('toggleReplies', commentId)
}

const handleLoadMoreReplies = (parentId: string) => {
  emit('loadMoreReplies', parentId)
}

const handleToggleLike = (commentId: string) => {
  emit('toggleLike', commentId)
}

const handleCreateComment = (content: string, mentionedUsers: string[] = []) => {
  emit('createComment', content, mentionedUsers)
}

const handleCreateReply = (parentId: string, content: string, mentionedUsers: string[] = []) => {
  emit('createReply', parentId, content, mentionedUsers)
}
</script>

<template>
  <div class="comment-system">
    <!-- 评论标题 -->
    <div class="comment-header mb-6">
      <h2 class="text-xl font-bold text-base-content flex items-center gap-2">
        <PhChatCircle :size="20" class="text-primary" />
        评论 ({{ totalComments }})
        <span v-if="loading" class="text-xs text-base-content/60 ml-2">加载中...</span>
      </h2>
    </div>

    <!-- 评论编辑器 -->
    <CommentEditor :submitting="submitting" @create-comment="handleCreateComment" class="mb-8" />

    <!-- 评论列表 -->
    <CommentList
      :comments="comments"
      :loading="loading"
      :loading-more="loadingMore"
      :has-more="hasMore"
      :replies-data="repliesData"
      :show-replies="showReplies"
      :has-more-replies="hasMoreReplies"
      :submitting="submitting"
      card-style="elevated"
      avatar-size="md"
      @load-more="handleLoadMore"
      @toggle-replies="handleToggleReplies"
      @load-more-replies="handleLoadMoreReplies"
      @toggle-like="handleToggleLike"
      @create-reply="handleCreateReply"
      @report-comment="(commentId: string) => console.log('举报评论:', commentId)"
      @delete-comment="(commentId: string) => console.log('删除评论:', commentId)"
    />
  </div>
</template>

<style scoped>
.comment-system {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
